<template>
  <div class="home">
    <van-pull-refresh 
      v-model="downPullRefreshLoading" 
      @refresh="pullRefresh"
    >
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in swipeList" :key="index">
          <img :src="image" class="swipeImg" />
        </van-swipe-item>
      </van-swipe>
      <van-grid class="grid" clickable :column-num="2" :gutter="5">
        <van-grid-item 
          v-for="(item, index) in grids" 
          :key="index" 
          :to="item.path"
        >
          <van-image width="60px" height="60px" :src="item.icon"/>
          <!-- <van-icon :name="item.icon" size="50px" color="#1989fa" /> -->
          <h4 v-text="item.title"></h4>
          <span v-text="item.desc"></span>
        </van-grid-item>
      </van-grid>
      <section class="van-section">
        <section class="van-block">
          <h2 class="van-title">为您推荐</h2>
        </section>
      </section>
      <van-list class="loanList"
        :finished="true"
        finished-text="没有更多了"
      >
        <van-panel 
          v-for="item in recommendList" 
          :key="item.id" 
          @click="toDetail(item.id)"
        >
          <van-row>
            <van-col class="iconWrap" span="4">
              <van-icon :name="item.icon ? item.icon : 'medel-o'" size="50px" color="rgb(248, 218, 26)" />
            </van-col>
            <van-col class="text" offset="1" span="18">
              <div class="title" v-text="item.name"></div>
              <div v-text="'额度: ' + item.price + '万元'"></div>
              <div v-text="'利率: ' + item.rate + '%'"></div>
              <div v-text="'年限: ' + item.year + '年'"></div>
              <div v-text="'用途: ' + item.uses"></div>
              <div v-text="'面向对象: ' + item.object"></div>
            </van-col>
          </van-row>
        </van-panel>
      </van-list>
      <br/>
    </van-pull-refresh>
  </div>
</template>

<script>
  import { Image, Swipe, SwipeItem, Lazyload, Grid, GridItem, List, Panel, Row, Col, Icon, PullRefresh } from 'vant';
  import { mapState } from 'vuex';

  export default {
    name: "home",
    components: {
      [Image.name]: Image,
      [Swipe.name]: Swipe,
      [SwipeItem.name]: SwipeItem,
      [Lazyload.name]: Lazyload,
      [Grid.name]: Grid,
      [GridItem.name]: GridItem,
      [List.name]: List,
      [Panel.name]: Panel,
      [Row.name]: Row,
      [Col.name]: Col,
      [Icon.name]: Icon,
      [PullRefresh.name]: PullRefresh,
    },
    data () {
      return {
        swipeList: [],
        grids: [
          {
            title: '阳光信贷', 
            desc: '阳光信贷', 
            path: {path: '/about', query: {name: 'credit'}}, 
            icon: require('../assets/images/indexIcon3/credit.png')
          },
          {
            title: '服务评价', 
            desc: '服务评价', 
            path: {path: '/rateRank'}, 
            icon: require('../assets/images/indexIcon3/rate.png')
          },
          {
            title: '收费标准', 
            desc: '收费标准详解', 
            path: {path: '/charge'}, 
            icon: require('../assets/images/indexIcon3/charge2.png')
          },
          {
            title: '投诉渠道', 
            desc: '提高服务质量', 
            path: {path: '/about', query: {name: 'complaint'}}, 
            icon: require('../assets/images/indexIcon3/complaint.png')
          }
        ],
        recommendList: [],
        downPullRefreshLoading: false,
      }
    },
    computed: {
      ...mapState ([
        'debugSetting' // 将 this.debugSetting 映射为 this.$store.state.debugSetting
      ])
		},
    created () {
      this.getData();
    },
    methods: {
      pullRefresh () {
        this.getData();
      },
      getData () {
        this.$api.info.getIndexInfo((res)=>{
          this.swipeList = [];
          res.data[0].forEach(item => {
            this.swipeList.push(this.debugSetting.resourcePath + item);
          });
          this.recommendList = res.data[1];
          this.downPullRefreshLoading = false;
        })
      },
      toDetail (id) {
        this.$router.push({path: '/detail', query: { id: id }});
      }
    }
  };
</script>

<style lang="scss">
  .home{
    .swipeImg{
      width: 100%;
      min-height: 53vw;
    }
    .grid{
      margin-top: 20px;
      .van-grid-item{
        .van-grid-item__content{
          padding:8px;
          h4{margin: 5px 0;}
          span{font-size: 14px;color: #a3a3a3;}
        }
      }
    }
  }
</style>
